<template>
  <div class="bottom_border">
    <el-form ref="elForm" :model="oneData" :rules="rules" size="medium" label-width="100px">
      <!-- 患者分组 -->
      <el-row>
        <el-card :body-style="{ padding: '0px' }">
          <el-col :span="12">
            <el-form-item label="患者分组" prop="trialGroup">
              <el-radio-group v-model="oneData.trialGroup" size="medium" :disabled="this.isModel">
                <el-radio v-for="(item, index) in trialGroupOptions" :key="index" :label="item.value"
                          :disabled="item.disabled">{{ item.label }}
                </el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-card>
      </el-row>

      <!--  标题：手术相关信息 -->
      <p style="font-weight: 800; font-size: 20px;color:#169BD5">
        手术相关信息
      </p>
      <!--  手术相关信息：功能 -->
      <el-card :body-style="{ padding: '0px' }">
        <el-row>

          <el-row>
            <el-col :span="8">
              <el-form-item label="手术日期:" prop="surgeryDate" label-width="30%">
                <el-date-picker v-model="oneData.surgeryDate" type="date" placeholder="选择日期"
                                :style="{ width: '80%' }" :disabled="this.isModel"></el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="手术名称:" prop="surgeryName" label-width="30%">
                <el-input v-model="oneData.surgeryName" :style="{ width: '80%' }" :disabled="this.isModel"></el-input>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="8">
              <el-form-item label="手术开始时间:" prop="surgeryStartTime" label-width="30%">
                <el-date-picker
                  v-model="oneData.surgeryStartTime"
                  type="datetime"
                  placeholder="选择日期和时间"
                  format="MM-dd HH:mm"
                  value-format="yyyy-MM-dd HH:mm"
                  :style="{ width: '80%' }"
                  :disabled="this.isModel"
                ></el-date-picker>
              </el-form-item>
            </el-col>

            <el-col :span="8">
              <el-form-item label="手术结束时间:" prop="surgeryEndTime" label-width="30%">
                <el-date-picker
                  v-model="oneData.surgeryEndTime"
                  type="datetime"
                  placeholder="选择日期和时间"
                  format="MM-dd HH:mm"
                  value-format="yyyy-MM-dd HH:mm"
                  :style="{ width: '80%' }"
                  :disabled="this.isModel"
                ></el-date-picker>
              </el-form-item>
            </el-col>

            <el-col :span="8">
              <el-form-item label="ASA分级" prop="asaGrade">
                <el-radio-group v-model="oneData.asaGrade" size="medium" :disabled="this.isModel">
                  <el-radio v-for="(item, index) in ASAOptions" :key="index" :label="item.value"
                            :disabled="item.disabled">{{ item.label }}
                  </el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
          </el-row>
        </el-row>
      </el-card>

      <!-- 药物使用 -->
      <el-card :body-style="{ padding: '0px' }">

        <!-- 麻醉方式 -->
        <div>
          <el-form :model="oneData" label-width="120px">
            <el-form-item label="麻醉方式">
              <el-radio v-model="oneData.anesthesiaMethod" label="骶管麻醉" :disabled="this.isModel">骶管麻醉</el-radio>
              <el-radio v-model="oneData.anesthesiaMethod" label="椎管内麻醉" :disabled="this.isModel">椎管内麻醉</el-radio>
              <el-radio v-model="oneData.anesthesiaMethod" label="静脉麻醉" :disabled="this.isModel">静脉麻醉</el-radio>
            </el-form-item>

            <!-- 骶管麻醉 -->
            <template v-if="oneData.anesthesiaMethod === '骶管麻醉'">
              <el-form-item label="使用药物">
                <el-radio v-model="oneData.medicineMethod" label="利多卡因" :disabled="this.isModel">利多卡因</el-radio>
                <el-radio v-model="oneData.medicineMethod" label="罗哌卡因" :disabled="this.isModel">罗哌卡因</el-radio>
                <el-radio v-model="oneData.medicineMethod" label="其他" :disabled="this.isModel">其他</el-radio>

                <template v-if="oneData.medicineMethod === '利多卡因'">
                  <div style="margin-top: 10px;">
                    <el-input v-model="oneData.lmCncentration" placeholder="浓度" style="width: 200px;" :disabled="this.isModel"></el-input>
                    %
                  </div>
                  <div style="margin-top: 10px;">
                    <el-input v-model="oneData.lmCapacity" placeholder="容量" style="width: 200px;" :disabled="this.isModel"></el-input>
                    ml
                  </div>
                </template>
                <template v-if="oneData.medicineMethod == '罗哌卡因'">
                  <div style="margin-top: 10px;">
                    <el-input v-model="oneData.lmCncentration" placeholder="浓度" style="width: 200px;" :disabled="this.isModel"></el-input>
                    %
                  </div>
                  <div style="margin-top: 10px;">
                    <el-input v-model="oneData.lmCapacity" placeholder="容量" style="width: 200px;" :disabled="this.isModel"></el-input>
                    ml
                  </div>
                </template>
                <template v-if="oneData.medicineMethod == '其他'">
                  <div style="margin-top: 10px;">
                    <el-input v-model="oneData.analgesic5name" placeholder="药物名称" style="width: 200px;" :disabled="this.isModel"></el-input>
                  </div>
                  <div style="margin-top: 10px;">
                    <el-input v-model="oneData.lmCncentration" placeholder="浓度" style="width: 200px;" :disabled="this.isModel"></el-input>
                    %
                  </div>
                  <div style="margin-top: 10px;">
                    <el-input v-model="oneData.lmCapacity" placeholder="容量" style="width: 200px;" :disabled="this.isModel"></el-input>
                    ml
                  </div>
                </template>
              </el-form-item>
            </template>

            <!-- 椎管内麻醉 -->
            <template v-if="oneData.anesthesiaMethod == '椎管内麻醉'">
              <el-form-item label="使用药物">
                <el-radio-group v-model="oneData.medicineMethod">
                  <el-radio label="利多卡因" :disabled="this.isModel">利多卡因</el-radio>
                  <el-radio label="罗哌卡因" :disabled="this.isModel">罗哌卡因</el-radio>
                  <el-radio label="其他" :disabled="this.isModel">其他</el-radio>
                </el-radio-group>

                <template v-if="oneData.medicineMethod == '利多卡因'">
                  <div style="margin-top: 10px;">
                    <el-input v-model="oneData.lmCncentration" placeholder="浓度" style="width: 200px;" :disabled="this.isModel"></el-input>
                    %
                  </div>
                  <div style="margin-top: 10px;">
                    <el-input v-model="oneData.lmCapacity" placeholder="容量" style="width: 200px;" :disabled="this.isModel"></el-input>
                    ml
                  </div>
                </template>
                <template v-if="oneData.medicineMethod == '罗哌卡因'">
                  <div style="margin-top: 10px;">
                    <el-input v-model="oneData.lmCncentration" placeholder="浓度" style="width: 200px;" :disabled="this.isModel"></el-input>
                    %
                  </div>
                  <div style="margin-top: 10px;">
                    <el-input v-model="oneData.lmCapacity" placeholder="容量" style="width: 200px;" :disabled="this.isModel"></el-input>
                    ml
                  </div>
                </template>
                <template v-if="oneData.medicineMethod == '其他'">
                  <div style="margin-top: 10px;">
                    <el-input v-model="oneData.analgesic5name" placeholder="药物名称" style="width: 200px;" :disabled="this.isModel"></el-input>
                  </div>
                  <div style="margin-top: 10px;">
                    <el-input v-model="oneData.lmCncentration" placeholder="浓度" style="width: 200px;" :disabled="this.isModel"></el-input>
                    %
                  </div>
                  <div style="margin-top: 10px;">
                    <el-input v-model="oneData.lmCapacity" placeholder="容量" style="width: 200px;" :disabled="this.isModel"></el-input>
                    ml
                  </div>
                </template>
              </el-form-item>
            </template>

            <!-- 静脉麻醉 -->
            <template v-if="oneData.anesthesiaMethod == '静脉麻醉'">
              <el-form-item label="镇痛药">
                <el-radio-group v-model="oneData.medicineMethod3one">
                  <el-radio label="盐酸艾司氯胺酮注射液" :disabled="this.isModel">盐酸艾司氯胺酮注射液</el-radio>
                  <el-radio label="芬太尼" :disabled="this.isModel">芬太尼</el-radio>
                  <el-radio label="舒芬太尼" :disabled="this.isModel">舒芬太尼</el-radio>
                  <el-radio label="瑞芬太尼" :disabled="this.isModel">瑞芬太尼</el-radio>
                  <el-radio label="其他" :disabled="this.isModel">其他</el-radio>
                </el-radio-group>

                <template v-if="oneData.medicineMethod3one == '盐酸艾司氯胺酮注射液'">
                  <div style="margin-top: 10px;">
                    <el-input v-model="oneData.analgesic1dosage" placeholder="用量" style="width: 200px;" :disabled="this.isModel"></el-input>
                    mg
                  </div>
                </template>
                <template v-if="oneData.medicineMethod3one == '芬太尼'">
                  <div style="margin-top: 10px;">
                    <el-input v-model="oneData.analgesic2dosage" placeholder="用量" style="width: 200px;" :disabled="this.isModel"></el-input>
                    μg
                  </div>
                </template>
                <template v-if="oneData.medicineMethod3one == '舒芬太尼'">
                  <div style="margin-top: 10px;">
                    <el-input v-model="oneData.analgesic3dosage" placeholder="用量" style="width: 200px;" :disabled="this.isModel"></el-input>
                    μg
                  </div>
                </template>
                <template v-if="oneData.medicineMethod3one == '瑞芬太尼'">
                  <div style="margin-top: 10px;">
                    <el-input v-model="oneData.analgesic4dosage" placeholder="用量" style="width: 200px;" :disabled="this.isModel"></el-input>
                    μg
                  </div>
                </template>
                <template v-if="oneData.medicineMethod3one == '其他'">
                  <div style="margin-top: 10px;">
                    <el-input v-model="oneData.otherAnalgesicName" placeholder="药物名称"
                              style="width: 200px;" :disabled="this.isModel"></el-input>
                  </div>
                  <div style="margin-top: 10px;">
                    <el-input v-model="oneData.analgesic5dosage" placeholder="用量" style="width: 200px;" :disabled="this.isModel"></el-input>
                    mg
                  </div>
                </template>
              </el-form-item>

              <el-form-item label="镇静药">
                <el-radio-group v-model="oneData.medicineMethod3two">
                  <el-radio label="瑞马唑仑" :disabled="this.isModel">瑞马唑仑</el-radio>
                  <el-radio label="丙泊酚" :disabled="this.isModel">丙泊酚</el-radio>
                  <el-radio label="其他" :disabled="this.isModel">其他</el-radio>
                </el-radio-group>

                <template v-if="oneData.medicineMethod3two == '瑞马唑仑'">
                  <div style="margin-top: 10px;">
                    <el-input v-model="oneData.sedative1dosage" placeholder="用量" style="width: 200px;" :disabled="this.isModel"></el-input>
                    mg
                  </div>
                </template>
                <template v-if="oneData.medicineMethod3two == '丙泊酚'">
                  <div style="margin-top: 10px;">
                    <el-input v-model="oneData.sedative2dosage" placeholder="用量" style="width: 200px;" :disabled="this.isModel"></el-input>
                    mg
                  </div>
                </template>
                <template v-if="oneData.medicineMethod3two == '其他'">
                  <div style="margin-top: 10px;">
                    <el-input v-model="oneData.otherSedativeName" placeholder="药物名称"
                              style="width: 200px;" :disabled="this.isModel"></el-input>
                  </div>
                  <div style="margin-top: 10px;">
                    <el-input v-model="oneData.sedative3dosage" placeholder="用量" style="width: 200px;" :disabled="this.isModel"></el-input>
                    mg
                  </div>
                </template>
              </el-form-item>
            </template>
          </el-form>
        </div>


        <!-- 术毕局部浸润操作 and 术后镇痛方式选择 -->
        <el-form ref="elForm" :model="oneData" :rules="rules" size="medium" label-width="100px">
          <!-- 术毕局部浸润操作 -->
          <el-row>
            <el-form-item label="术毕局部润浸操作:" prop="postOpInfiltration" label-width="12%">
              <el-radio-group v-model="oneData.postOpInfiltration" size="medium" :disabled="this.isModel">
                <el-radio v-for="(item, index) in postOpInfiltrationOptions" :key="index" :label="item.value"
                          :disabled="item.disabled">{{ item.label }}
                </el-radio>
              </el-radio-group>
            </el-form-item>
          </el-row>

          <el-row v-if="oneData.postOpInfiltration === '0'">
            <el-form-item label-width="12%">
              布比卡因脂质体注射液 剂量:
              <el-input v-model="oneData.infiltrationBubiMg" style="width: 100px; display: inline-block;" :disabled="this.isModel"></el-input>
              mg,
              容量:
              <el-input v-model="oneData.infiltrationBubiMl" style="width: 100px; display: inline-block;" :disabled="this.isModel"></el-input>
              mL
            </el-form-item>
          </el-row>

          <el-row v-if="oneData.postOpInfiltration === '1'">
            <el-form-item label-width="12%">
              0.375%盐酸罗哌卡因注射液 容量:
              <el-input v-model="oneData.infiltrationYansuan" style="width: 100px; display: inline-block;" :disabled="this.isModel"></el-input>
              mL
            </el-form-item>
          </el-row>

          <!-- 术后镇痛方式选择 -->
          <el-row>
            <el-form-item label="术后镇痛方式选择:" prop="postOpPainRelief" label-width="12%">
              <el-radio-group v-model="oneData.postOpPainRelief" size="medium" :disabled="this.isModel">
                <el-radio v-for="(item, index) in postOpPainReliefOptions" :key="index" :label="item.value"
                          :disabled="item.disabled">{{ item.label }}
                </el-radio>
              </el-radio-group>
            </el-form-item>
          </el-row>

          <el-row v-if="oneData.postOpPainRelief === '0'">
            <el-form-item label-width="12%">
              氟比洛芬酯bid程序镇痛 剂量:
              <el-input v-model="oneData.painTest" style="width: 100px; display: inline-block;" :disabled="this.isModel"></el-input>
              mg
            </el-form-item>
          </el-row>

          <el-row v-if="oneData.postOpPainRelief === '1'">
            <div>
              <el-form-item label-width="12%">
                <el-checkbox label="口服非甾体药物">
                  <el-row>
                    口服非甾体药物: 药物
                    <el-input v-model="oneData.painMouseMedc" style="width: 100px; display: inline-block;" :disabled="this.isModel"></el-input>
                    剂量
                    <el-input v-model="oneData.painMouseMg" style="width: 100px; display: inline-block;" :disabled="this.isModel"></el-input>
                    给药频率
                    <el-input v-model="oneData.painMouseTime" style="width: 100px; display: inline-block;" :disabled="this.isModel"></el-input>
                    次/分
                  </el-row>
                </el-checkbox>
                <el-checkbox label="PCA">
                  <el-row>
                    PCA 药物
                    <el-input v-model="oneData.painPcaMedc" style="width: 100px; display: inline-block;" :disabled="this.isModel"></el-input>
                    剂量
                    <el-input v-model="oneData.painPcaMl" style="width: 100px; display: inline-block;" :disabled="this.isModel"></el-input>
                    配置体积
                    <el-input v-model="oneData.painPcaV" style="width: 100px; display: inline-block;" :disabled="this.isModel"></el-input>
                    背景剂量
                    <el-input v-model="oneData.painPcaBgc" style="width: 100px; display: inline-block;" :disabled="this.isModel"></el-input>
                    冲击剂量
                    <el-input v-model="oneData.painPcaChong" style="width: 100px; display: inline-block;" :disabled="this.isModel"></el-input>
                    锁定时间
                    <el-input v-model="oneData.painPcaLtime" style="width: 100px; display: inline-block;" :disabled="this.isModel"></el-input>
                  </el-row>
                </el-checkbox>
                <el-checkbox label="其他">
                  <el-row>
                    其他方法
                    <el-input v-model="oneData.painElseMedc" style="width: 200px; display: inline-block;" :disabled="this.isModel"></el-input>
                  </el-row>
                </el-checkbox>
              </el-form-item>
            </div>
          </el-row>
        </el-form>

      </el-card>
      <p style="font-weight: 800; font-size: 20px;color:#169BD5">
        术后疼痛评分（手术当天）
      </p>

      <div class="bottom_border" >
        <el-form ref="elForm" :model="oneData" :rules="rules" size="medium" label-width="100px" v-if="this.isModel">
          <el-row>
            <el-table ref="myTable" :data="tableData" border style="width: 100%">
              <el-table-column prop="indicator" label="指标" width="120"></el-table-column>
              <el-table-column
                v-for="column in columns"
                :key="column.prop"
                :prop="column.prop"
                :label="column.label"
                width="150"
              >
                <template v-slot="scope" >
                  <template v-if="scope.row.indicator === '时间'">
                    <el-time-select
                      v-model="scope.row[column.prop]"
                      :picker-options="{
                      start: '00:00',
                      step: '00:15',
                      end: '23:59',
                    }"
                      format="HH:mm"
                      value-format="HH:mm"
                      placeholder="选择时间"
                      @change="handleTimeChange(scope.row, column.prop)"
                      :style="{ width: '100%' }"
                      disabled="true"
                    >
                    </el-time-select>

                  </template>


                  <template v-else>
                    <el-select
                      v-model="scope.row[column.prop]"
                      @change="handleSelectChange(scope.row, column.prop)"
                      :style="{ width: '100%' }"
                      disabled = true
                    >
                      <el-option v-for="n in 11" :key="n" :label="n - 1" :value="n - 1"></el-option>
                    </el-select>
                  </template>
                </template>
              </el-table-column>
            </el-table>
          </el-row>
          <el-row>
            <el-alert
              title="NRS评分量表：用数字式0~10代表文字来表示的疼痛程度。将一条直线等分为10段，按0~10分次序评估疼痛程度。数字越大代表疼痛程度越大。0分：无痛 1~3分：轻度疼痛 4~6中度疼痛 7~10重度疼痛"
              type="info"
              show-icon
            ></el-alert>
          </el-row>
        </el-form>
        <el-form ref="elForm" :model="oneData" :rules="rules" size="medium" label-width="100px" v-else>
          <el-row>
            <el-table ref="myTable" :data="tableData" border style="width: 100%">
              <el-table-column prop="indicator" label="指标" width="120"></el-table-column>
              <el-table-column
                v-for="column in columns"
                :key="column.prop"
                :prop="column.prop"
                :label="column.label"
                width="150"
              >
                <template v-slot="scope" >
                  <template v-if="scope.row.indicator === '时间'">
                    <el-time-select
                      v-model="scope.row[column.prop]"
                      :picker-options="{
                      start: '00:00',
                      step: '00:15',
                      end: '23:59',
                    }"
                      format="HH:mm"
                      value-format="HH:mm"
                      placeholder="选择时间"
                      @change="handleTimeChange(scope.row, column.prop)"
                      :style="{ width: '100%' }"
                    >
                    </el-time-select>

                  </template>


                  <template v-else>
                    <el-select
                      v-model="scope.row[column.prop]"
                      @change="handleSelectChange(scope.row, column.prop)"
                      :style="{ width: '100%' }"
                    >
                      <el-option v-for="n in 11" :key="n" :label="n - 1" :value="n - 1"></el-option>
                    </el-select>
                  </template>
                </template>
              </el-table-column>
            </el-table>
          </el-row>
          <el-row>
            <el-alert
              title="NRS评分量表：用数字式0~10代表文字来表示的疼痛程度。将一条直线等分为10段，按0~10分次序评估疼痛程度。数字越大代表疼痛程度越大。0分：无痛 1~3分：轻度疼痛 4~6中度疼痛 7~10重度疼痛"
              type="info"
              show-icon
            ></el-alert>
          </el-row>
        </el-form>
      </div>

      <el-row :gutter="24" style="width: 100%;margin-left: 30%;margin-top: 10px; " v-show="!this.uploadLock">
        <el-col :span="8">
          <el-button @click="cancelForm">取消</el-button>
        </el-col>
        <el-col :span="8">
          <el-button type="primary" @click="submitForm">保存</el-button>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script>
import {listCrfOne, updateCrfOne, addCrfOne} from "@/api/crfOne/crfOne";

export default {
  data() {
    return {
      isModel: false,
      columns: [
        {prop: 't2h', label: '术后2h（±15min）'},
        {prop: 't4h', label: '术后4h（±15min）'},
        {prop: 't6h', label: '术后6h（±30min）'},
        {prop: 't8h', label: '术后8h（±30min）'}
      ],
      tableData: [
        {indicator: '时间', t2h: '', t4h: '', t6h: '', t8h: ''},
        {indicator: '静息', t2h: 0, t4h: 0, t6h: 0, t8h: 0},
        {indicator: '运动或咳嗽', t2h: 0, t4h: 0, t6h: 0, t8h: 0}
      ],
      uploadLock: true, // 上传锁定状态
      oneData: {
        testerId: undefined, // 受试者ID
        trialGroup: '', // 受试者试验入组：试验组或对照组
        surgeryDate: null, // 手术日期
        surgeryName: undefined, // 手术名称
        surgeryStartTime: null, // 手术开始时间
        surgeryEndTime: null, // 手术结束时间
        asaGrade: undefined, // ASA分级
        anesthesiaMethod: '', // 麻醉方式：骶管麻醉、椎管内麻醉、静脉麻醉
        postOpInfiltration: undefined, // 术毕局部浸润操作：试验组0或对照组1
        postOpPainRelief: undefined, // 术后镇痛方式选择：试验组0或对照组1
        painAssessment2hTime: '', // 术后2h疼痛评分时间
        painAssessment2hRest: null, // 术后2h静息疼痛评分
        painAssessment2hActivity: null, // 术后2h运动或咳嗽疼痛评分
        painAssessment4hTime: '', // 术后4h疼痛评分时间
        painAssessment4hRest: null, // 术后4h静息疼痛评分
        painAssessment4hActivity: null, // 术后4h运动或咳嗽疼痛评分
        painAssessment6hTime: '', // 术后6h疼痛评分时间
        painAssessment6hRest: null, // 术后6h静息疼痛评分
        painAssessment6hActivity: null, // 术后6h运动或咳嗽疼痛评分
        painAssessment8hTime: '', // 术后8h疼痛评分时间
        painAssessment8hRest: null, // 术后8h静息疼痛评分
        painAssessment8hActivity: null, // 术后8h运动或咳嗽疼痛评分
        status: '', // 状态（1完成，2未完成）
        infiltrationBubiMg: '', // 术毕局部浸润布比卡因注射计量mg
        infiltrationBubiMl: '', // 术毕局部浸润布比卡因注射计量ml
        infiltrationYansuan: '', // 术毕局部浸润盐酸注入量ml
        painTest: '', // 术后镇痛实验组氟比洛芬酯程序mg
        painMouseMedc: '', // 术后镇痛对照组口服药名称
        painMouseMg: '', // 术后镇痛对照组口服药计量
        painMouseTime: '', // 术后镇痛对照组口服药频率
        painPcaMedc: '', // 术后镇痛对照组PCA名称
        painPcaMl: '', // 术后镇痛对照组PCA剂量
        painPcaV: '', // 术后镇痛对照组PCA配置体积
        painPcaBgc: '', // 术后镇痛对照组PCA背景剂量
        painPcaChong: '', // 术后镇痛对照组PCA冲击剂量
        painPcaLtime: '', // 术后镇痛对照组PCA锁定时间
        painElseMedc: '', // 术后镇痛对照组其他药物名称
        painElseMl: '', // 术后镇痛对照组其他药物剂量
        painReliefMethods: [], // 术后镇痛对照组的选择方法（口服非甾体药物、PCA、其他）

        medicineMethod: '', // 使用药物名称
        lmCncentration: '', // 麻醉药浓度
        lmCapacity: '', // 麻醉药剂量
        medicineMethod3one: '', // 镇痛药分类
        analgesic1dosage: '', // 盐酸艾司氯胺酮注射液用量
        analgesic2dosage: '', // 芬太尼用量
        analgesic3dosage: '', // 舒芬太尼用量
        analgesic4dosage: '', // 瑞芬太尼用量
        analgesic5name: '', // 其他药物名称
        analgesic5dosage: '', // 其他药物用量
        medicineMethod3two: '', // 镇静药方法
        sedative1dosage: '', // 瑞马唑仑用量
        sedative2dosage: '', // 丙泊酚用量
        sedative3dosage: '', // 其他镇静药用量
        sedative3name: '', // 其他镇静药名称
      },
      rules: {
        trialGroup: [{
          required: true,
          message: '患者分组不能为空',
          trigger: 'change'
        }],
        surgeryDate: [{
          required: false,
          message: '手术日期',
          trigger: 'change'
        }],
        surgeryName: [{
          required: false,
          message: '',
          trigger: 'blur'
        }],
        surgeryStartTime: [{
          required: false,
          message: '',
          trigger: 'change'
        }],
        surgeryEndTime: [{
          required: false,
          message: '',
          trigger: 'change'
        }],
        asaGrade: [{
          required: false,
          message: 'ASA分级不能为空',
          trigger: 'change'
        }],
        anesthesiaMethod: [{
          required: false,
          message: '麻醉方式不能为空',
          trigger: 'change'
        }],
        medicineMethod: [{
          required: false,
          message: '使用药物不能为空',
          trigger: 'change'
        }],
        lm1Cncentration: [{
          required: false,
          message: '',
          trigger: 'blur'
        }],
        lm1Capacity: [{
          required: false,
          message: '',
          trigger: 'blur'
        }],
        rm1Cncentration: [{
          required: false,
          message: '',
          trigger: 'blur'
        }],
        rm1Capacity: [{
          required: false,
          message: '',
          trigger: 'blur'
        }],
        em1Cncentration: [{
          required: false,
          message: '',
          trigger: 'blur'
        }],
        em1Capacity: [{
          required: false,
          message: '',
          trigger: 'blur'
        }],
        medicineMethod2: [{
          required: false,
          message: '使用药物不能为空',
          trigger: 'change'
        }],
        lm2Cncentration: [{
          required: false,
          message: '',
          trigger: 'blur'
        }],
        lm2Capacity: [{
          required: false,
          message: '',
          trigger: 'blur'
        }],
        rm2Cncentration: [{
          required: false,
          message: '',
          trigger: 'blur'
        }],
        rm2Capacity: [{
          required: false,
          message: '',
          trigger: 'blur'
        }],
        em2Cncentration: [{
          required: false,
          message: '',
          trigger: 'blur'
        }],
        em2Capacity: [{
          required: false,
          message: '',
          trigger: 'blur'
        }],
        medicineMethod3one: [{
          required: false,
          message: '镇痛药:不能为空',
          trigger: 'change'
        }],
        analgesic1dosage: [{
          required: false,
          message: '盐酸艾司氯胺酮注射液',
          trigger: 'blur'
        }],
        analgesic2dosage: [{
          required: false,
          message: '芬太尼',
          trigger: 'blur'
        }],
        analgesic3dosage: [{
          required: false,
          message: '舒芬太尼',
          trigger: 'blur'
        }],
        analgesic4dosage: [{
          required: false,
          message: '瑞芬太尼',
          trigger: 'blur'
        }],
        analgesic5name: [{
          required: false,
          message: '其他',
          trigger: 'blur'
        }],
        analgesic5dosage: [{
          required: false,
          message: '其它用量',
          trigger: 'blur'
        }],
        medicineMethod3two: [{
          required: false,
          message: '镇静药不能为空',
          trigger: 'change'
        }],
        sedative1dosage: [{
          required: false,
          message: '瑞马唑仑',
          trigger: 'blur'
        }],
        sedative2dosage: [{
          required: false,
          message: '丙泊酚',
          trigger: 'blur'
        }],
        sedative3name: [{
          required: false,
          message: '其他',
          trigger: 'blur'
        }],
        sedative3dosage: [{
          required: false,
          message: '其他用量',
          trigger: 'blur'
        }],
        postOpInfiltration: [{
          required: false,
          message: '术毕局部润浸操作:不能为空',
          trigger: 'change'
        }],
        postOpPainRelief: [{
          required: false,
          message: '术后镇痛方式选择:不能为空',
          trigger: 'change'
        }],
      },
      trialGroupOptions: [{
        "label": "试验组",
        "value": "试验组"
      }, {
        "label": "对照组",
        "value": "对照组"
      }],
      ASAOptions: [{
        "label": "Ⅰ",
        "value": "ASA1"
      }, {
        "label": "Ⅱ",
        "value": "ASA2"
      }, {
        "label": "Ⅲ",
        "value": "ASA3"
      }, {
        "label": "Ⅳ",
        "value": "ASA4"
      }, {
        "label": "Ⅴ",
        "value": "ASA5"
      }],
      anesthesiaMethod: [{
        "label": "骶管麻醉",
        "value": "Method1"
      }, {
        "label": "椎管内麻醉",
        "value": "Method2"
      }, {
        "label": "静脉麻醉",
        "value": "Method3"
      }],
      postOpInfiltrationOptions: [
        {label: '试验组', value: '0'},
        {label: '对照组', value: '1'}
      ],
      postOpPainReliefOptions: [
        {label: '试验组', value: '0'},
        {label: '对照组', value: '1'}
      ]
    }
  },

  created() {
    if (this.$route.query.id && this.$route.query.f === '1') {
      this.uploadLock = false;
    }else{
      this.isModel = true;
    }
    if (this.$route.query.id != null) {
      // 1. 从数据库加载数据
      listCrfOne(this.$route.query.id).then(res => {
        console.log('数据库数据', res);
        if (res) {
          this.oneData = res;
          console.log("kakak")
          console.log(this.oneData)
          const indicators = ['Time', 'Rest', 'Activity'];
          const timePoints = ['t2h', 't4h', 't6h', 't8h'];
          // 3. 同步 tableData 中的数据，确保正确绑定 v-model
          indicators.forEach((indicator, rowIndex) => {
            timePoints.forEach(timePoint => {
              const tableKey = timePoint;
              const oneDataKey = `painAssessmen${timePoint}${indicator}`;
              this.tableData[rowIndex][tableKey] = this.oneData[oneDataKey];
            });
          });
          // 2. 对从数据库返回的数据进行处理
          timePoints.forEach(timePoint => {
            const timeKey = `painAssessmen${timePoint}Time`;
            console.log('时间是这样的', timeKey)
            this.oneData[timeKey] = res[timeKey];
          });
        }
        console.log('onData',this.oneData)
      });

    }
  },

  methods: {

    // 提交表单的方法
    submitForm() {
      this.$refs['elForm'].validate(valid => {
        if (valid) {
          // 提交数据前，确保数据被更新
          const indicators = ['Time', 'Rest', 'Activity'];
          const timePoints = ['t2h', 't4h', 't6h', 't8h'];

          // 术后疼痛分析
          indicators.forEach((indicator, rowIndex) => {
            timePoints.forEach(timePoint => {
              const tableKey = timePoint;
              const oneDataKey = `painAssessmen${timePoint}${indicator}`;
              this.oneData[oneDataKey] = this.tableData[rowIndex][tableKey];
            });
          });


          // 检查所有字段，设置状态
          let allFilled = true;
          let anyFilled = false;

          for (let key in this.oneData) {
            if (this.oneData.hasOwnProperty(key)) {
              const value = this.oneData[key];
              if (value !== null && value !== undefined && value !== '') {
                anyFilled = true;  // 至少一个字段有值
              } else {
                allFilled = false;  // 发现一个字段为空
              }
            }
          }

          // 根据字段填充情况设置 status 值
          if (allFilled) {
            this.oneData.status = 1;  // 所有字段都有值
          } else if (anyFilled) {
            this.oneData.status = 2;  // 部分字段有值
          } else {
            this.oneData.status = 0;  // 所有字段为空
          }


          this.oneData.testerId = this.$route.query.id;

          // 查询数据库，决定是更新还是插入数据
          listCrfOne(this.$route.query.id).then((res) => {
            if (res) {
              updateCrfOne(this.oneData).then(res => {
                this.$message.success("修改成功");
                // 提交后重置表单或刷新数据
                this.resetForm();
              });
            } else {
              addCrfOne(this.oneData).then(res => {
                this.$message.success("提交成功");
                // 提交后重置表单或刷新数据
                this.resetForm();
              });
            }
          });
        } else {
          this.$message.error("表单验证未通过");
        }
      });
    },
    // 返回上一个页面
    cancelForm() {
      this.$router.go(-1);
    },
    handleTimeChange(row, prop) {
      console.log('时间已更新:', row[prop]);
    },
    handleSelectChange(row, prop) {
      console.log('值已更新:', row[prop]);
    }
  }
}
</script>

<style scoped>
.container {
  margin: 20px;
}

.bottom_border input {
  border: none; /* 取消默认边框 */
  border-bottom: 1px solid #ccc; /* 设置底部边框 */
  font-size: 18px;
  margin: 0;
  padding: 0;
}

.section-title {
  font-weight: bold;
  margin-bottom: 10px;
}

.radio-group {
  margin-bottom: 20px;
}

.el-row {
  margin-bottom: 20px;
}

.el-form-item {
  margin-bottom: 20px;
}
</style>

